import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../../theme/vars.css';

export const cardStyle = style({
	padding: '0',
	backgroundColor: vars.color.panelBackground,
	margin: '1rem',
	overflow: 'hidden',
	borderRadius: vars.layout.middleRadius,
});

export const captionStyle = style({
	margin: '1rem 1.4rem',
});

globalStyle(`${cardStyle}>*`, {
	borderLeft: 'none',
	borderRight: 'none',
});

globalStyle(`${cardStyle}>*:first-child`, {
	borderTop: 'none',
});

globalStyle(`${cardStyle}>*:last-child`, {
	borderBottom: 'none',
});

globalStyle(`${cardStyle}>*:last-child::after`, {
	display: 'none',
	content: '',
});
